<template>
	<view class="layout">
		<view class="bg_list">
			<view class="bg_pic">
				<view class="bg_pic_list">
					<image
						src="https://img1.baidu.com/it/u=2360260634,815392718&fm=253&fmt=auto&app=138&f=JPEG?w=502&h=500">
					</image>
				</view>
			</view>
			<view class="bg_name">用户名</view>
			<view class="bg_cate">
				<view class="vip_content flex flex-wrap ">
					<block :key="i" v-for="(item, i) in viplist">
						<view class="vip_list flex justify-center flex-direction align-center"
							:class="isselect == i ? 'selected' : ''" @tap="selectVIP(i, item)">
							<view class="vip_list_title ">
								<text>{{ item.title }}</text>
							</view>
							<view class="vip_list_price ">{{ item.vip_price }}</view>
							<view class="vip_list_price_youhui ">{{ item.youhui }}</view>
						</view>
					</block>
				</view>
			</view>
		</view>
		<view class="bg_bt">
			<view class="bg_bt_yop">
				<view class="bg_fee">
					<view class="cu-form-group">
						<checkbox color="#ffd4a2" activeBorderColor="#ffd4a2" :class="checkbox[2].checked?'checked':''"
							:checked="checkbox[2].checked?true:false" value="C"></checkbox>
						<view class="bg_fee_title" @click="agreeUserProtocol">开通钱请同意<text>《会员服务协议》</text></view>
					</view>
				</view>
				<view class="bg_tb">如何关闭自动续费</view>
				<view class="bt_connup">确认协议并开通</view>
				<view class="vip_tl">VIP会员特权</view>
				<view class="vip_mory">
					<view class="vip_mory_list" v-for="(item,index) in vipTips">
						<view class="vip_mory_list_pic">
							<image src="../../static/vip.png"></image>
						</view>
						<view class="vip_mory_list_title">
							{{item}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isselect: 0,
				vipTips:[
					"增加中奖概率",
					"无限畅用自动刮奖",
					"VIP经典标识",
					"无限畅用10连抽",
					"解锁更多工具栏"
				],
				viplist: [
					{
						vip_price: '$39.9',
						title: '按年订阅',
						youhui:'$128.00'
					},{
						vip_price: '$0.99',
						title: '按月订阅',
						youhui:'$9.99'
					},
				],
				checkbox: [{
					value: 'A',
					checked: true
				}, {
					value: 'B',
					checked: true
				}, {
					value: 'C',
					checked: false
				}],
			}
		},
		methods: {
			selectVIP(a, b) {
				this.isselect = a
				this.select_vip = b
			},
			agreeUserProtocol(){
				// #ifdef APP
					plus.runtime.openURL('http://www.one-top.cn/p/s/service.html')
				// #endif
					
			},
		}
	}
</script>

<style lang="scss">
	.layout{
		width: 100vw;
		height: 100vh;
	}
	.bg_list {
		
		background-color: #343434;
		width: 100%;
		height: 800rpx;
		overflow: hidden;
	}

	.bg_pic {
		width: 150rpx;
		height: 150rpx;
		background-color: #585858;
		border-radius: 90rpx;
		margin: 60rpx auto;
		overflow: hidden;
	}

	.bg_pic_list {
		width: 130rpx;
		height: 130rpx;
		border-radius: 90rpx;
		margin: 10rpx;
	}

	.bg_pic_list image {
		width: 130rpx;
		height: 130rpx;
		border-radius: 90rpx;
	}

	.bg_cate {
		width: 80%;
		height: 380rpx;
		background-color: #f6e2c0;
		border-radius: 30rpx;
		margin: 0 auto;
		margin-top: 50rpx;
	}

	.bg_name {
		margin-top: -50rpx;
		width: 100%;
		text-align: center;
		color: #ffffff;
		font-weight: bold;
		font-size: 35rpx;
		padding: 5rpx;
	}

	.bg_rule {
		width: 330rpx;
		height: 50rpx;
		background-color: bisque;
		text-align: center;
		margin: auto;
		border-radius: 15rpx;
	}

	.vip_content {
		padding: 20rpx 20rpx;
	}

	.vip_list {
		position: relative;
		border-radius: 32rpx;
		padding: 10rpx;
		background: #f7e8ca;
		box-shadow: 0 0.025rem 0.5rem 0 #f7e8ca !important;
		border: 1px solid #ffbd6a;
		margin: 20rpx;
		width: 230rpx;
		height: 150px;
		box-sizing: border-box;
		z-index: 1;
		align-items: center;
		flex-direction: column;
		justify-content: center !important;

		.vip_item_icon {
			width: 50rpx;
			height: 15rpx;
			border-radius: 10rpx;
			background-color: bisque;
		}

		.vip_list_title {
			font-size: 30rpx;
			font-weight: 600;
			color: #886b6b;
		}

		.vip_list_price {
			color: #b58246;
			font-size: 46rpx;
			font-weight: 600;
			vertical-align: text-bottom;
		}
		.vip_list_price_youhui {
			color: indianred;
			font-size: 26rpx;
			font-weight: 400;
			vertical-align: text-bottom;
			 text-decoration: line-through;
		}

	}

	.flex {
		display: flex;
	}

	.flex-wrap {
		flex-wrap: wrap;
	}

	.vip_list.selected {
		// position: absolute;
		border-radius: 38rpx;
		background-color: #ffd4a2;
		color: #fff !important;
	}

	.bg_bt {
		background-color: #343434;
		box-shadow: 1px -2rem 20rem 20px #f7e8ca !important;
		width: 100%;
		height: calc(100vh - 700rpx);
		overflow: hidden;
		margin-top: -5rpx;
	}

	.bg_bt_yop {
		background-color: #343434;
		box-shadow: inset -1px -4rem 4rem 0px #f7e8ca !important;
		width: 100%;
		height: 700px;
		overflow: hidden;
	}

	.bg_fee {
		position: relative;
		width: 80%;
		height: 80rpx;
		background-color: #f6e2c0;
		margin: 30rpx auto;
		border-radius: 40rpx;
	}


	.cu-form-group {
		padding: 15rpx 50rpx 15rpx 50rpx;
		// padding:  1rpx 30rpx ;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.cu-form-group.checkbox {
		border-radius: 90rpx !important;
	}

	.bg_fee_title {
		color: #d7b37c;
		text-align: center;
		font-size: 30rpx;
	}

	.bg_tb {
		width: 100%;
		text-align: center;
		color: #b58246;
	}

	.bt_connup {
		background-color: #f1d9a5;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		width: 60%;
		margin: 20rpx auto;
		border-radius: 90rpx;
		color: #b58246;
	}

	.vip_tl {
		width: 100%;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #f1d9a5;
	}

	.vip_mory {
		width: 100%;
		height: auto;
		margin-top: 30rpx;
	}

	.vip_mory_list {
		width: 33.33%;
		height: 170rpx;
		overflow: hidden;
		float: left;
	}

	.vip_mory_list_pic {
		width: 90rpx;
		height: 90rpx;
		background-color: #6b6459;
		background-image: linear-gradient(62deg, #6b6459 0%, #4c4a4a 100%);
		margin: 0 auto;
		border-radius: 90rpx;
	}

	.vip_mory_list_pic image {
		width: 50rpx;
		height: 50rpx;
		margin: 20rpx;
	}

	.vip_mory_list_title {
		text-align: center;
		color: #f1d9a5;
		font-size: 30rpx;
		margin-top: 10rpx;
	}
</style>